var timeDate = 'map' + new Date().getTime(); // 默认时间戳（主要应用于此场景）
var newMapDate = ''; // 生成新Echart的map（主要用于编辑和预览场景）
var mapDataRender = []
var timer
const delayTime = 3000
var mapGeoJson

// for (let i = 0; i < 3; i++) {
//   console.log(new Date().getTime())
// }


function defineComponentProps() {
  const componentProps = {}
  let option = {
    backgroundColor: '',
    // title: {
    //   show: true,
    //   text: "行政区域图",
    //   left: "40%",
    //   textStyle: {
    //     color: 'rgba(64, 158, 255, 1)',
    //   }
    // },
    tooltip: {
      backgroundColor: "rgba(0,0,0,0)",
      trigger: "item",
    },
    legend: {
      show: false,
    },
    series: [
      {
        tooltip: {
          show: true,
          padding: [6, 10],
          backgroundColor: 'rgba(255,255,255,.8)',
          borderColor: "#fff",
          borderRadius: "10px",
          textStyle: {
            align: "left",
            verticalAlign: "middle",
            lineHeight: 26,
            color: 'rgba(0,0,0,.7)'
          }
        },
        // tooltip: {
        //   trigger: "item",
        //   formatter: function (item) {
        //     if (!item) return
        //     const mainDivElement = document.createElement("div");

        //     // 最外层DIV
        //     const outerDivElement = document.createElement("div");
        //     outerDivElement.style.background = "#FFF"
        //     outerDivElement.style.borderRadius = "10px"
        //     outerDivElement.style.paddingTop = "10px"
        //     // outerDivElement.style.boxShadow = "0 0 10px #666"


        //     // 上面文本名称DIV
        //     const nameDivElement = document.createElement("div");
        //     nameDivElement.style.background = ""
        //     nameDivElement.style.color = "#000"
        //     nameDivElement.style.height = "20px"
        //     nameDivElement.style.borderRadius = "6px"
        //     nameDivElement.style.fontSize = "12px"
        //     nameDivElement.style.lineHeight = "20px"
        //     nameDivElement.style.textAlign = "center"
        //     nameDivElement.style.margin = "0 2px"
        //     // 文字名称DIV内容设置
        //     const nameSpanElement = document.createElement("span");
        //     nameSpanElement.innerHTML = item.data.name

        //     // 下面文本名称
        //     const addressDivElement = document.createElement("div");
        //     addressDivElement.style.color = "#000"
        //     addressDivElement.style.textAlign = "center"
        //     addressDivElement.style.paddingTop = "8px 6px"
        //     // 下面文本具体内容
        //     const addressValSpanElement = document.createElement("span");
        //     addressValSpanElement.style.fontWeight = "bold"
        //     addressValSpanElement.style.fontSize = "18px"
        //     addressValSpanElement.innerHTML = item.data.value

        //     // 新增Element元素
        //     outerDivElement.appendChild(nameDivElement)
        //     nameDivElement.appendChild(nameSpanElement)
        //     outerDivElement.appendChild(addressDivElement)
        //     addressDivElement.appendChild(addressValSpanElement)

        //     mainDivElement.appendChild(outerDivElement)
        //     return mainDivElement.innerHTML;
        //   },
        // },
        name: "数据",
        type: "map",
        map: timeDate, // 自定义扩展图表类型
        aspectScale: 1,
        zoom: 0.6, //缩放
        showLegendSymbol: false,
        label: {
          show: true,
          color: "rgba(255,255,255,1)",
          fontSize: 10,
        },
        itemStyle: {
          areaColor: "rgba(14,149,241,1)",
          borderColor: "rgba(233,233,233,1)",
          borderWidth: 1,
          shadowColor: "rgba(14,149,241,1)",
          shadowBlur: 20,
        },
        emphasis: {
          label: {
            show: true,
            color: "rgba(255,255,255,1)",
            fontSize: 10,
          },
          itemStyle: {
            areaColor: "rgba(255,240,64,1)",
            borderColor: "rgba(255,255,255,1)",
            borderWidth: 1,
          },
        },
        layoutCenter: ["50%", "50%"],
        layoutSize: "160%",
        markPoint: {
          symbol: "none",
        },
        data: [],
      },
    ],
  };

  componentProps.options = option;
  // 循环
  // console.log("myChart", myChart)
  // 返回组件属性, 一定要return 
  return componentProps
}

async function defineComponentBeforeCreated({ VueElement }) {
  console.log('defineComponentBeforeCreated')
  let mapUrl = BASE_URL + "/adminapp/public/assets/elfinder/files/json/geo/广州.json"
  let getMapJson = function () {
    return fetch(mapUrl).then(res => res.json())
  }
  mapGeoJson = await getMapJson()
  echarts.registerMap(VueElement ? VueElement.id : timeDate, mapGeoJson)
  console.log("mapGeoJson ==>", mapGeoJson)

}

async function updateMap(data, VueInstance) {
  let mapGeoJsonData = data
  echarts.registerMap(VueInstance.options.series[0].map, mapGeoJsonData);
  mapDataRender = mapGeoJsonData.features.map((item) => {
    return {
      value: (Math.random() * 1000).toFixed(2),
      name: item.properties.name,
    };
  });
  if (VueInstance) {
    VueInstance.options.series[0].data = mapDataRender
    VueInstance.updateOptions(VueInstance.options)
  }
}

function defineComponentCreated({ VueInstance, VueElement }) {
  if (VueElement && VueInstance) {
    newMapDate = VueElement.id
    if (newMapDate) {
      echarts.registerMap(newMapDate, mapGeoJson)
      VueInstance.options.series[0].map = newMapDate
    } else {
      echarts.registerMap(VueElement ? VueElement.id : timeDate, mapGeoJson)
    }
  }
  console.log("VueInstance.options.series[0].data", VueInstance.options.series[0].data)
  VueInstance.options.series[0].data = mapDataRender
  VueInstance.updateOptions(VueInstance.options)

  const myChart = VueInstance.getEChartInstance();
  // 依次跳转显示 - begin
  var arr = [
    "花都区",
    "从化区",
    "增城区",
    "黄埔区",
    "白云区",
    "天河区",
    "越秀区",
    "荔湾区",
    "海珠区",
    "番禺区",
    "南沙区",
  ];
  var index = 0;
  timer = setInterval(function () {
    index = index < arr.length ? index : 0;
    showTips(arr[index++]);
  }, 1000);

  myChart.on("mouseover", function () {
    clearInterval(timer);
  });

  myChart.on("mouseout", function () {
    clearInterval(timer);
    timer = setInterval(function () {
      index = index < arr.length ? index : 0;
      showTips(arr[index++]);
    }, delayTime);
  });
  // 依次跳转显示 - end

  function showTips(name) {
    mapDataRender = mapGeoJson.features.map((item) => {
      return {
        value: (Math.random() * 1000).toFixed(2),
        name: item.properties.name,
      };
    });

    mapDataRender.forEach((item, i) => {

      myChart.dispatchAction({
        type: "mapUnSelect",
        seriesIndex: 0,
        dataIndex: i,
      });
      if (item.name.includes(name)) {
        myChart.dispatchAction({
          type: "showTip",
          seriesIndex: 0,
          dataIndex: i,
        });
        myChart.dispatchAction({
          type: "mapSelect",
          seriesIndex: 0,
          dataIndex: i,
        });
      }
    });
  }
}

function defineComponentDestroy({ VueInstance }) {
  if (timer) {
    clearInterval(timer)
  }
}

async function handleDataCallback({
  ResourceData,
  VueInstance,
}) {
  if (VueInstance) {
    updateMap(ResourceData, VueInstance)
  }
}